<template>
  <div class="boo-a">
    <van-row>
      <van-col span="10">
        <div class="wrapper-a">
          <div class="wrapper-b" v-for="item of swiperList" :key="item.id">
            <div class="item">
              <img :src="item.imgUrl" />
            </div>
          </div>
        </div>
      </van-col>
      <van-col class="book-a" span="7">
        <div class="book-a-a">东宫</div>
        <div class="book-a-b">读至50%</div>
      </van-col>
      <van-col span="7">
        <div class="yuedu">
          <van-button color="#FF8000" round type="info">继续阅读</van-button>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "BooksRead",

  data() {
    return {
      swiperList: [
        {
          id: "001",
          imgUrl: require("../assets/images/zhuda-a.jpg"),
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>

.wrapper-b img {
  width: 100%;
  border-radius:18px;
}

.book-a-a {
  padding: 30px 0 0 0;
  font-size: 30px;
  font-weight: bold;
  color: rgb(117, 69, 46);
}

.book-a-b {
  padding: 30px 0 0 0;
  font-size: 16px;
  color: #666;
}

.boo-a {
  margin: 0 auto;
  text-align: center;
  width: 90%;
  border-radius:18px;
  /* padding: 15px; */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.1);
  border: 10px solid rgb(255, 255, 255)
}

.yuedu {
  padding-top: 70px;
}
</style>
